{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '其他插件:example/other/index', '评分插件'])}


<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">评分插件 jQuery Raty</div>
        </header>
        <div class="card-body">
        
          <p>插件也可使用图片，这里只字体图标字体做示例。</p>
        <div class="mb-3">
          <div class="js-raty" data-score="3" data-number="10"></div>
        </div>
        
        <p>也可以自定义图标</p>
        <div class="mb-3">
          <div class="js-raty" data-score="5" data-number="10" data-star-on="mdi mdi-emoticon-happy fs-4 text-success" data-star-off="mdi mdi-emoticon-happy fs-4 text-gray"></div>
        </div>
        
        </div>
      </div>
  </div>

</div>

<script type="text/javascript">
    $(document).ready(function() {
        jQuery.fn.raty.defaults.hints = ["超烂", "差", "一般", "好", "很好"],
        jQuery(".js-raty").each(function() {
            var a = jQuery(this);
            a.raty({
                starType: "i",
                targetText: a.data("target-text") ? a.data("target-text") : '',
                score: a.data("score") ? a.data("score") : 0,
                number: a.data("number") ? a.data("number") : 5,
                cancel: a.data("cancel") ? a.data("cancel") : !1,
                target: a.data("target") ? a.data("target") : !1,
                targetScore: a.data("target-score") ? a.data("target-score") : !1,
                precision: a.data("precision") ? a.data("precision") : !1,
                cancelOff: a.data("cancel-off") ? a.data("cancel-off") : "mdi mdi-close fs-4 text-danger",
                cancelOn: a.data("cancel-on") ? a.data("cancel-on") : "mdi mdi-close fs-4",
                starHalf: a.data("star-half") ? a.data("star-half") : "mdi mdi-star-half fs-4 text-warning",
                starOff: a.data("star-off") ? a.data("star-off") : "mdi mdi-star fs-4 text-gray",
                starOn: a.data("star-on") ? a.data("star-on") : "mdi mdi-star fs-4 text-warning",
                click: function(score, e) {
                    console.log('ID: ' + $(this).attr('class') + "\nscore: " + score + "\nevent: " + e.type);
                }
            })
        })
    });
    </script>